<template>
  <div class="job-box">
    <template v-if="showRoot">
      <!-- <div class='job-banner ct'>
        <div class="banner-text">
          <div class="c-new-title">
            工作动态
          </div>
          <div class="c-new-text">
            “站院联建”农技推广服务平台
          </div>
        </div>
      </div> -->
    <div class='job-content ct'>
      <!-- 动态 -->
      <div class="c-new">
        <div class="c-item">
          <div class="item-head">
            <img src="../../assets/job/2.png" alt="">
            <div class="head-txt">新闻报道</div>
          </div>
          <div class="item-moree" @click="to('jobmore')">
            >> 查看更多
          </div>
        </div>
        <div class="item-content">
          <div class="c-img">
            <img :src="bannerList?.[0]?.bannerUrl" alt="">
            <div class="c-txt">{{ bannerList?.[0]?.title }}</div>
          </div>
          <div class="new-info">
            <div class="info-item cp" v-for="item in works" @click="todetail(item.workId, 'job', 'news_report')">
              <div class="info-i-t">
                <div class="i-l">{{ item.workTitle }}</div>
                <div class="i-r">{{ item.createdTime?.slice?.(0,11) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 四个模块的2x2网格布局 -->
      <div class="four-blocks-grid">
        <!-- 通知公告 -->
        <div class="block-section">
          <div class="section-header">
            <div class="header-left">
              <img src="../../assets/job/3.png" alt="">
              <div class="header-title">田间示范</div>
            </div>
            <div class="header-more" @click="to('noticemore')">
              >> 查看更多
            </div>
          </div>
          <div class="block-item">
            <div class="block-content">
              <div class='content-item cp' @click="todetail(item.workId,'job','field_trial')" v-for="(item, index) in notices" :key="index">
                <div class="item-text">
                  {{ item.workTitle }}
                </div>
                <div class="item-date">
                  {{ item.createdTime?.slice?.(0,11) }}
                </div>
              </div>
              <!-- 补充空行以保持固定高度 -->
              <div class='content-item empty-item' v-for="index in Math.max(0, 5 - notices.length)" :key="`empty-${index}`">
                <div class="item-text"></div>
                <div class="item-date"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 政策法规 -->
        <div class="block-section">
          <div class="section-header">
            <div class="header-left">
              <img src="../../assets/job/9.png" class="head-z" alt="">
              <div class="header-title">科技助农</div>
            </div>
            <div class="header-more" @click="to('jobpolicymore')">
              >> 查看更多
            </div>
          </div>
          <div class="block-item">
            <div class="block-content">
              <div class='content-item cp' @click="todetail(item.workId, 'job', 'tech_support')" v-for="(item, index) in policies" :key="index">
                <div class="item-text">
                  {{ item.workTitle }}
                </div>
                <div class="item-date">
                  {{ item.createdTime?.slice?.(0,11) }}
                </div>
              </div>
              <!-- 补充空行以保持固定高度 -->
              <div class='content-item empty-item' v-for="index in Math.max(0, 5 - policies.length)" :key="`empty-${index}`">
                <div class="item-text"></div>
                <div class="item-date"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 科学研究 -->
        <!-- <div class="block-section">
          <div class="section-header">
            <div class="header-left">
              <img src="../../assets/job/4.png" alt="">
              <div class="header-title">公益课堂</div>
            </div>
            <div class="header-more" @click="to('jobsciencemore')">
              >> 查看更多
            </div>
          </div>
          <div class="block-item">
            <div class="block-content">
              <div class='content-item cp' @click="todetail(item.workId, 'job', 'public_class')" v-for="(item, index) in pageSciens" :key="index">
                <div class="item-text">
                  {{ item.workTitle }}
                </div>
                <div class="item-date">
                  {{ item.createdTime?.slice?.(0,11) }}
                </div>
              </div>
              <div class='content-item empty-item' v-for="index in Math.max(0, 5 - pageSciens.length)" :key="`empty-${index}`">
                <div class="item-text"></div>
                <div class="item-date"></div>
              </div>
            </div>
          </div>
        </div> -->
        
        <!-- 站院日志 -->
        <!-- <div class="block-section">
          <div class="section-header">
            <div class="header-left">
              <img src="../../assets/job/5.png" alt="">
              <div class="header-title">暑期学校</div>
            </div>
            <div class="header-more" @click="to('joblogmore')">
              >> 查看更多
            </div>
          </div>
          <div class="block-item">
            <div class="block-content">
              <div class='content-item cp' @click="todetail(item.workId, 'job', 'summer_school')" v-for="(item, index) in yardLogs" :key="index">
                <div class="item-text">
                  {{ item?.workTitle }}
                </div>
                <div class="item-date">
                  {{ item.createdTime?.slice?.(0,11) }}
                </div>
              </div>
              <div class='content-item empty-item' v-for="index in Math.max(0, 5 - yardLogs.length)" :key="`empty-${index}`">
                <div class="item-text"></div>
                <div class="item-date"></div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    </template>
    <router-view v-else></router-view>
  </div>
</template>
<script setup>
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { pageWorkState, pageBanner  } from '@/api/home'
  const router = useRouter();
  console.log('00router', router)

    // 轮播图
  const bannerList = ref([]);
  const getPageBanners = async() => {
    const params = {
      params: {
        status: true,
      },
      page: {
        pageSize: 1,
        pageNum: 1,
      }
    }
    const ret = await pageBanner(params)
    bannerList.value = ret?.data?.list || [];
  }
  getPageBanners();

    // 新闻动态
  const works = ref([]);
  const getPageWorkState = async() => {
    const params = {
      params: {
        status: true,
        category: 'news_report'
      },
      page: {
        pageSize: 6,
        pageNum: 1,
      }
    }
    const ret = await pageWorkState(params)
    works.value = ret?.data?.list || [];
  }
  getPageWorkState()

  // 田间示范
  const notices = ref([]);
  const getFieldTrial = async() => {
    const params = {
      params: {
        status: true,
        category: 'field_trial'
      },
      page: {
        pageSize: 5,
        pageNum: 1,
      }
    }
    const ret = await pageWorkState(params)
    notices.value = ret?.data?.list || [];
  }
  getFieldTrial();

  // 科技助农
  const policies = ref([]);
  const getTechSupport = async() => {
    const params = {
      params: {
        status: true,
        category: 'tech_support'
      },
      page: {
        pageSize: 5,
        pageNum: 1,
      }
    }
    const ret = await pageWorkState(params)
    policies.value = ret?.data?.list || [];
  }
  getTechSupport();

  // 公益课堂
  const pageSciens = ref([]);
  const getPublicClass = async() => {
    const params = {
      params: {
        status: true,
        category: 'public_class'
      },
      page: {
        pageSize: 5,
        pageNum: 1,
      }
    }
    const ret = await pageWorkState(params)
    pageSciens.value = ret?.data?.list || [];
  }
  getPublicClass()

  // 暑期学校
  const yardLogs = ref([]);
  const getSummerSchool =  async() => {
    const params = {
      params: {
        status: true,
        category: 'summer_school'
      },
      page: {
        pageSize: 5,
        pageNum: 1,
      }
    }
    const ret = await pageWorkState(params)
    yardLogs.value = ret?.data?.list || [];
  }
  getSummerSchool();

  const to = (path) => {
    // 根据路径设置正确的面包屑导航
    const breadcrumbMap = {
      'jobmore': 'news_report',
      'noticemore': 'field_trial', 
      'jobpolicymore': 'tech_support',
      'jobsciencemore': 'public_class',
      'joblogmore': 'summer_school'
    };
    
    const categoryMap = {
      'news_report': '新闻报道',
      'field_trial': '田间示范',
      'tech_support': '科技助农',
      'public_class': '公益课堂',
      'summer_school': '暑期学校'
    };
    
    const category = breadcrumbMap[path];
    const displayName = categoryMap[category];
    router.push({
      path: `/job/jobmore`,
      query: { 
        category: category, // 传递枚举值
        breadcrumb: `首页-工作动态-${displayName}`
      }
    })
  }
  
  const todetail = (id, type, module) => {
    // 根据module参数来设置面包屑导航
    const moduleMap = {
      'news_report': '新闻报道',
      'field_trial': '田间示范',
      'tech_support': '科技助农',
      'public_class': '公益课堂',
      'summer_school': '暑期学校'
    };
    
    const displayName = moduleMap[module] || '新闻报道';
    const breadcrumb = `首页-工作动态-${displayName}`;
    
    router.push({
      path: `/job/jobdetail/${id}`,
      query: { 
        type: type,
        category: module, // 传递枚举值
        breadcrumb: breadcrumb
      }
    })
  }

  const todetail1 = (id, type) => {
    router.push(`/job/jobdetail1/${id}?type=${type}`)
  }
  const showRoot = computed(() => {
    return router?.currentRoute?.value?.meta?.id === 0
  })
</script>
<style lang="scss" scoped>
.job-box {
  flex: 1;
  background-color: #f8f8f8;
  color: #777;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  .job-banner {
    width: 100%;
    height: 280px;
    background: url(../../assets/job/1.png) no-repeat center center / cover;
    padding: 0 10%;
    display: flex;
    align-items: center;
    color: #fff;
    .banner-text {
      padding-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      &::after {
        position: absolute;
        left: 0;
        top: 12px;
        height: 84%;
        width: 4px;
        background-color: #fff;
        content: ''
      }
      .c-new-title {
        font-weight: 700;
        font-size: 50px;
      }
      .c-new-text {
        font-size: 30px;
      }
    }
  }
  .job-content {
    padding: 0 10%;
    width: 100%;
    background: #f8f8f8 url('../../assets/job/6.png') no-repeat 500px 0;
    .c-item {
      padding-top: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      .item-head {
        width: 100%;
        display: flex;
        align-items: center;
        color: #666;
        padding-bottom: 20px;
        img {
          width: 30px;
          height: 30px;
          margin-right: 15px;
          object-fit: contain;
        }
        .head-z {
          width: 40px;
          height: 40px;
        }

        .head-txt {
          font-size: 24px;
        }
      }
      .item-moree {
        color: #068043;
        font-size: 24px;
        font-weight: normal;
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
      }
    }
    .item-content {
      display: flex;
      .c-img {
        position: relative;
        img {
          width: 640px;
          height: 400px;
        }
        .c-txt {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 50px;
          width: 100%;
          background: rgba(0,0,0,0.4);
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 20px;
          font-size: 18px;
        }
      }
      .new-info {
        flex: 1;
        margin-left: 30px;
        background-color: #fff;
        padding: 20px 30px;
        overflow: hidden;
        color: #777;
        .info-item {
          border-bottom: 2px solid #e5e5e5;
          cursor: pointer;
          &:last-child{
            border-bottom: 0 none;
          }
        }
        .info-i-t {
          font-size: 22px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 0;
          .i-l {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .i-r {
            margin-left: 30px;
            width: 150px;
            text-align: right;
          }
        }
      }
    }
    .four-blocks-grid {
      display: grid;
      grid-template-columns: repeat(2, calc(50% - 15px));
      gap: 30px;
      margin-top: 20px;
      margin-bottom: 40px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      justify-content: center;
      .block-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
          margin-bottom: 10px;
          width: 100%;
          height: 60px;
          .header-left {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
            img {
              width: 30px;
              height: 30px;
              margin-right: 10px;
              object-fit: contain;
              flex-shrink: 0;
              &.head-z {
                width: 30px;
                height: 30px;
              }
            }
            .header-title {
              font-size: 24px;
              font-weight: bold;
              white-space: nowrap;
            }
          }
          .header-more {
            color: #068043;
            font-size: 24px;
            cursor: pointer;
            flex-shrink: 0;
            white-space: nowrap;
          }
        }
        .block-item {
          background-color: #fff;
          border-radius: 0;
          overflow: hidden;
          box-shadow: none;
          width: 100%;
          min-height: 300px;
          .block-content {
            padding: 15px 20px 25px 20px;
            width: 100%;
            box-sizing: border-box;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .content-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              border-bottom: 1px solid #eee;
              width: 100%;
              min-height: 42px;
              &:last-child {
                border-bottom: none;
              }
              .item-text {
                font-size: 22px;
                color: #777;
                flex: 1;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                min-width: 0;
              }
              .item-date {
                font-size: 22px;
                color: #777;
                width: 120px;
                text-align: right;
                white-space: nowrap;
                flex-shrink: 0;
              }
            }
            .empty-item {
              border-bottom: none;
              min-height: 42px; /* 保持与其他行相同的高度 */
            }
          }
        }
      }
    }
  }

}
</style>